<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="resources/layui/css/layui.css" th:href="@{/resources/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/resources/css/public.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/resources/layui_ext/dtree/dtree.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/resources/layui_ext/dtree/font/dtreefont.css}" media="all"/>    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<style>
    .layui-card{
        height: 577px
    }
</style>
<body>


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 15px;">
    <legend>搜索条件</legend>
</fieldset>
<form action="" method="post" id="searchFrm"  class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-inline">
                <input type="text" name="goodsname" id="goodsname" class="layui-input input-radius"
                       placeholder="请输入商品名称">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">商品描述</label>
            <div class="layui-input-inline">
                <input type="text" name="description" id="description" class="layui-input input-radius"
                       placeholder="请输入商品描述">
            </div>
        </div>
        <div class="layui-inline" style="padding-left: 3%">
            <button type="button" onclick="sss()" class="layui-btn layui-btn-sm layui-btn-radius"><i
                    class="layui-icon layui-icon-search layui-icon-normal" ></i>查询
            </button>

        </div>
    </div>
</form>



<div class="layui-bg-gray" style="padding: 30px;">

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md4"  th:each="data :${goods}">
            <div class="layui-card" style="position:relative;">
                <form th:id="${data.id}">
                <div class="layui-card-header" style="height:auto">
                    <img  width=200 height=200 th:src="'/file/showImageByPath?path='+${data.goodsimg}"/>
                </div>
                <br>
                <div class="layui-card-body">
                    商品名称：<a th:text="${data.goodsname}"></a><br><br>
                    产地：<a th:text="${data.produceplace}"></a><br><br>
                    货存：<font th:text="${data.number}"></font><br><br>
                    价格：<font color="red" th:text="${data.price}"></font>元<br><br>
                    <div th:if="${data.rentprice}">
                    租价：<font color="blue" th:text="${data.rentprice}"></font>元/天<br><br>
                    </div>
                    商品描述：<font style="height:60px" th:text="${data.description}"></font><br>
                </div>
                    <div class="layui-inline" style="padding-left: 15%;padding-bottom: 3%;position:absolute;bottom:0;">
                        <button type="button" name="add" class="layui-btn layui-btn-normal"><i
                                class="layui-icon layui-icon-cart-simple  layui-icon-normal"></i>加入购物车
                        </button>
                        <button type="button" name="buy" class="layui-btn layui-btn"><i
                                class="layui-icon layui-icon-dollar  layui-icon-normal"></i>购买
                        </button>
                        <button th:if="${data.rentprice}" type="button" name="rent" class="layui-btn layui-btn-warm"><i
                                class="layui-icon layui-icon-log  layui-icon-normal"></i>租赁
                        </button>

                    </div>
                </form>
            </div>
        </div>
    </div>

</div>
<div id="rentDiv" style="display: none;padding: 10px 5% 1px 10px;">
    <form action="" method="post" class="layui-form"  lay-filter="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">租赁天数</label>
                <div class="layui-input-inline">
                    <input type="text" name="num" id="num" class="layui-input input-radius"
                           placeholder="请输入天数">
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-inline" style="text-align: center;padding-left: 18%">
                <button type="button" class="layui-btn layui-btn-radius" lay-submit="" lay-filter="doSubmit2" id="doSubmit2"><i
                        class="layui-icon layui-icon-search layui-icon-normal"></i>提交
                </button>
                <button type="reset" class="layui-btn layui-btn-radius layui-btn-warm"><i
                        class="layui-icon layui-icon-refresh"></i><span>重置</span>
                </button>
            </div>
        </div>
    </form>
</div>
<div id="buyDiv" style="display: none;padding: 10px 5% 1px 10px;">
    <form action="" method="post" class="layui-form"  lay-filter="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">购买数量</label>
                <div class="layui-input-inline">
                    <input type="text" name="num"  class="layui-input input-radius"
                           placeholder="请输入数量">
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-inline" style="text-align: center;padding-left: 18%">
                <button type="button" class="layui-btn layui-btn-radius" lay-submit="" lay-filter="doSubmit3" id="doSubmit3"><i
                        class="layui-icon layui-icon-search layui-icon-normal"></i>提交
                </button>
                <button type="reset" class="layui-btn layui-btn-radius layui-btn-warm"><i
                        class="layui-icon layui-icon-refresh"></i><span>重置</span>
                </button>
            </div>
        </div>
    </form>
</div>
<div id="addDiv" style="display: none;padding: 10px 5% 1px 10px;">
    <form action="" method="post" class="layui-form"  lay-filter="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">购买数量</label>
                <div class="layui-input-inline">
                    <input type="text" name="number"  class="layui-input input-radius"
                           placeholder="请输入数量">
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-inline" style="text-align: center;padding-left: 18%">
                <button type="button" class="layui-btn layui-btn-radius" lay-submit="" lay-filter="doSubmit4" id="doSubmit4"><i
                        class="layui-icon layui-icon-search layui-icon-normal"></i>提交
                </button>
                <button type="reset" class="layui-btn layui-btn-radius layui-btn-warm"><i
                        class="layui-icon layui-icon-refresh"></i><span>重置</span>
                </button>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript" src="/resources/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    function sss(){
        var goodsname = document.getElementById("goodsname").value;
        var description = document.getElementById("description").value;
        location.replace( window.encodeURI("/bus/toBuy?name="+goodsname+"&description="+description));
    }
    layui.use(['jquery', 'util', 'layer', 'form'], function(){
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form;
      var username = '[[${session.user.name}]]';
        var goodsname ;
        var produceplace ;
        var rentprice;
        var description;
        var num ;
        var number;
        var mainIndex;
        var price;
        $("[name='rent']").click(function(e){
            mainIndex = layer.open({
                type:1,
                content:$("#rentDiv"),
                area:['400px','180px'],
                title:'信息录入',
                success:function () {
                    username = '[[${session.user.name}]]';
                    console.log(e.target.parentNode.previousSibling.previousSibling.children[0]);
                    console.log(e.target.parentNode.previousSibling.previousSibling.children[3]);
                    console.log(e.target.parentNode.previousSibling.previousSibling.children[9]);
                    console.log(e.target.parentNode.previousSibling.previousSibling.children[13]);

                    goodsname = e.target.parentNode.previousSibling.previousSibling.children[0].innerText;
                    produceplace = e.target.parentNode.previousSibling.previousSibling.children[3].innerText;
                    rentprice = e.target.parentNode.previousSibling.previousSibling.children[12].children[0].innerText;
                    description = e.target.parentNode.previousSibling.previousSibling.children[13].innerText;


                }
            });

        });

        form.on("submit(doSubmit2)",function (data) {
            num = data.field.num;
            $.ajax({
                type:"POST",
                url:"/order/CreateOrder",
                dataType:"json",
                data:{
                    way:"租赁",
                    username:username,
                    goodsname:goodsname,
                    produceplace:produceplace,
                    price:Number(num)*Number(rentprice),
                    description:description,
                    num:num,
                    state:"4"
                },
                async:false,
                success:function (res) {
                    if (res.code==200){
                     /*   tableIns.reload({
                        });*/
                    }
                    layer.msg("租赁成功");
                    layer.close(mainIndex);
                }
            })
        });
        $("[name='buy']").click(function(e){
/*            layer.msg('生成订单中', {
                icon: 16,
                time : 1500,
                shade:0.5
            });
            setTimeout(function () {function
                layer.msg("生成完成!", {
                    icon: 6,
                    time: 500
                })
            },1500);*/
            mainIndex = layer.open({
                type:1,
                content:$("#buyDiv"),
                area:['400px','180px'],
                title:'信息录入',
                success:function () {
            console.log(1);
             username = '[[${session.user.name}]]';
             goodsname = e.target.parentNode.previousSibling.previousSibling.children[0].innerText;
             produceplace = e.target.parentNode.previousSibling.previousSibling.children[3].innerText;
             price = e.target.parentNode.previousSibling.previousSibling.children[9].innerText;
             description = e.target.parentNode.previousSibling.previousSibling.children[13].innerText;
                }});
/*
console.log(e.target.parentNode.previousSibling.previousSibling.children);
*/


        });
        form.on("submit(doSubmit3)",function (data) {
            num = data.field.num;
            $.ajax({
                type:"POST",
                url:"/order/CreateOrder",
                dataType:"json",
                data:{
                    way:"购买",
                    username:username,
                    goodsname:goodsname,
                    produceplace:produceplace,
                    price:Number(num)*Number(price),
                    description:description,
                    num:num,
                    state:"1"
                },
                async:false,
                success:function (res) {
                    if (res.code==200){
                        /*   tableIns.reload({
                           });*/
                        layer.msg('生成订单中', {
                            icon: 16,
                            time : 1500,
                            shade:0.5
                        });
                        setTimeout(function () {
                        layer.msg("生成完成!", {
                            icon: 6,
                            time: 500
                        })
                        },1500);
                    }
/*
                    layer.msg("购买成功");
*/
                    layer.close(mainIndex);
                }
            })
        });

        $("[name='add']").click(function(e){
            /*            layer.msg('生成订单中', {
                            icon: 16,
                            time : 1500,
                            shade:0.5
                        });
                        setTimeout(function () {function
                            layer.msg("生成完成!", {
                                icon: 6,
                                time: 500
                            })
                        },1500);*/
            mainIndex = layer.open({
                type:1,
                content:$("#addDiv"),
                area:['400px','180px'],
                title:'信息录入',
                success:function () {
                    console.log(1);
                    username = '[[${session.user.name}]]';
                    goodsname = e.target.parentNode.previousSibling.previousSibling.children[0].innerText;
/*
                    produceplace = e.target.parentNode.previousSibling.previousSibling.children[3].innerText;
*/
                    price = e.target.parentNode.previousSibling.previousSibling.children[9].innerText;
/*
                    description = e.target.parentNode.previousSibling.previousSibling.children[13].innerText;
*/
                }});
            /*
            console.log(e.target.parentNode.previousSibling.previousSibling.children);
            */


        });
        form.on("submit(doSubmit4)",function (data) {
            number = data.field.number;
            $.ajax({
                type:"POST",
                url:"/car/addCar",
                dataType:"json",
                data:{
                    username:username,
                    goodsname:goodsname,
                    price:Number(price),
                    number:number,
                },
                async:false,
                success:function (res) {
                    if (res.code==200){
                        layer.msg(res.msg);
                    }
                    layer.close(mainIndex);
                }
            })
        });
    /*    $.ajax({
            type:"POST",
            url:"/order/CreateOrder",
            dataType:"json",
            data:{
                way:"购买",
                username:username,
                goodsname:goodsname,
                produceplace:produceplace,
                price:price,
                description:description,
                num:1,
                state:"1"
            },
            async:false,
            success:function (result) {
                console.log(result.data);
            }
        })*/



    });
</script>

</body>
</html>